<template>
  <div :class="$style.whitemodal1">
    <div :class="$style.topBlock">
      <div :class="$style.tabBox">
        <div :class="[$style.tabItem, tabIndex == 0 ? $style.tabActive : '']" @click="changeTab(0)">修改登录密码</div>
        <div :class="[$style.tabItem, tabIndex == 1 ? $style.tabActive : '']" @click="changeTab(1)">修改支付密码</div>
      </div>
    </div>
    <div :class="$style.mainBlock">
      <template v-if="tabIndex == 0">
        <lay-form ref="formRef1" :model="formData1" :rules="formRules1">
          <lay-form-item label="旧密码" label-position="top" prop="oldPsw" required>
            <lay-input v-model="formData1.oldPsw" placeholder="旧密码" :allow-clear="true" type="password" password>
            </lay-input>
          </lay-form-item>
          <lay-form-item label="新密码" label-position="top" prop="newPsw" required>
            <lay-input v-model="formData1.newPsw" placeholder="新密码" :allow-clear="true" type="password" password>
            </lay-input>
          </lay-form-item>
          <lay-form-item label="确认密码" label-position="top" prop="confirmPsw" required>
            <lay-input v-model="formData1.confirmPsw" placeholder="确认密码" :allow-clear="true" type="password" password>
            </lay-input>
          </lay-form-item>
          <lay-form-item>
            <lay-button type="primary" @click="submitForm1">提交</lay-button>
          </lay-form-item>
        </lay-form>
      </template>
      <template v-else>
        <lay-form ref="formRef2" :model="formData2" :rules="formRules2">
          <lay-form-item label="旧密码" label-position="top" prop="oldPsw" required>
            <lay-input v-model="formData2.oldPsw" placeholder="旧密码" :allow-clear="true" type="password" password>
            </lay-input>
          </lay-form-item>
          <lay-form-item label="新密码" label-position="top" prop="newPsw" required>
            <lay-input v-model="formData2.newPsw" placeholder="新密码" :allow-clear="true" type="password" password>
            </lay-input>
          </lay-form-item>
          <lay-form-item label="确认密码" label-position="top" prop="confirmPsw" required>
            <lay-input v-model="formData2.confirmPsw" placeholder="确认密码" :allow-clear="true" type="password" password>
            </lay-input>
          </lay-form-item>
          <lay-form-item>
            <lay-button type="primary" @click="submitForm2">提交</lay-button>
          </lay-form-item>
        </lay-form>
      </template>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "WhiteModal1",
  data() {
    return {
      tabIndex: 0,
      formData1: {
        oldPsw: '',
        newPsw: '',
        confirmPsw: '',
      },
      formRules1: {
        oldPsw: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        newPsw: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        confirmPsw: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: this.validateConfirmPsw1, trigger: 'blur' },
        ],
      },
      formData2: {
        oldPsw: '',
        newPsw: '',
        confirmPsw: '',
      },
      formRules2: {
        oldPsw: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        newPsw: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        confirmPsw: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: this.validateConfirmPsw2, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm2() {
      let that = this;
      that.$refs.formRef2.validate(valid => {
        if (valid) {
          // let para = {
          //   nickName: that.formData2.nickName,
          //   avatar: that.formData2.avatar,
          // }
          // let loadIndex = that.$layer.load();
          // that.$axios.post('', para).then((res) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg(res.data.message, { time: 1000 });
          //   if (res.data.code != 200) {
          //     return;
          //   }
          // }).catch((err) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg('提交失败,请重试', { time: 1000 });
          // });
        } else {
          return false;
        }
      });
    },
    validateConfirmPsw2(rule, value, callback) {
      if (this.formData2.newPsw == value) {
        callback();
      } else {
        if (!this.formData2.newPsw) {
          callback(new Error('请输入新密码'));
        } else if (this.formData2.newPsw != value) {
          callback(new Error('两次输入的密码不一致'));
        }
      }
    },
    submitForm1() {
      let that = this;
      that.$refs.formRef1.validate(valid => {
        if (valid) {
          // let para = {
          //   nickName: that.formData1.nickName,
          //   avatar: that.formData1.avatar,
          // }
          // let loadIndex = that.$layer.load();
          // that.$axios.post('', para).then((res) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg(res.data.message, { time: 1000 });
          //   if (res.data.code != 200) {
          //     return;
          //   }
          // }).catch((err) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg('提交失败,请重试', { time: 1000 });
          // });
        } else {
          return false;
        }
      });
    },
    validateConfirmPsw1(rule, value, callback) {
      if (this.formData1.newPsw == value) {
        callback();
      } else {
        if (!this.formData1.newPsw) {
          callback(new Error('请输入新密码'));
        } else if (this.formData1.newPsw != value) {
          callback(new Error('两次输入的密码不一致'));
        }
      }
    },
    changeTab(index) {
      this.tabIndex = index;
    },
  },
});
</script>
<style module>
.whitemodal1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  overflow-y: auto;
}

.topBlock {
  width: 100%;
  height: 85px;
  box-sizing: border-box;
  padding-top: 25px;
}

.tabBox {
  width: 100%;
  height: 40px;
  background: #F0F2F5;
  border-radius: 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
}

.tabItem {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 30px;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
  cursor: pointer;
}

.tabActive {
  background-color: #FFFFFF;
  border-radius: 3px;
  color: #1890FF;
}

.mainBlock {
  width: 100%;
  height: calc(100% - 85px);
  box-sizing: border-box;
  padding-bottom: 20px;
}
</style>
<style scoped>
.layui-btn {
  width: 200px;
  height: 32px;
  line-height: 32px;
}
</style>